<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./vue.js"></script>
    <style>      
    </style>
</head>
<body>
    <div id="app" style="width: 100%;border-top:3px solid black">
        <table style="width:100%">
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>购买数量</th>
                    <th>合计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item , index) in message">  
                    <td>{{item.name}}</td>
                    <td> 
                        ￥{{item.price}}
                    </td>
                    <td>
                        <input type="text" v-model="item.quantity">
                    </td>
                    <td>￥{{item.price*item.quantity}}</td>
                    <td>
                        <button @click="remove(index)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        总购买价            
                    </td>
                    <td>
                        ￥{{animatenum}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                totalPrice:0,
                animatenum:300,
                message:[
                    {
                        name: '测试商品1',
                        quantity: 1,
                        price:10
                   },{
                        name: '测试商品2',
                        quantity: 3,
                        price: 40
                   },{
                        name: '测试商品3',
                        quantity: 3,
                        price: 90
                   },{
                        name: '测试商品4',
                        quantity: 4,
                        price: 100
                    }
                ]
            },
            watch:{
                toComput2(newValue){ 
                   this.animatenum=newValue;
                }
            },
            computed:{
               
                toComput2(){
                    var _this=this;
                    _this.totalPrice=0;
                    this.message.forEach(function(mess){
                        _this.totalPrice+=parseInt(mess.price*mess.quantity);
                    })
                    return this.totalPrice;
                }
            },
            methods:{
                toComput(){
                    var _this=this;
                    _this.message.forEach(function(mess){
                        _this.totalPrice+=parseInt(mess.price*mess.quantity);
                    })
                    return _this.totalPrice;
                },
                add(index){
                    var _this=this;
                    _this.message[index].quantity++;
                },
                subtract(index){
                    var _this=this;
                    _this.message[index].quantity--;
                    if(_this.message[index].quantity<=0){
                        _this.message.splice(index,1)
                    }

                },
                remove(index){
                    var _this=this;
                        _this.message.splice(index,1)

                }
            }
        });


    </script>   

</body>
</html>